<template>
  <div class="common-page f-c">
    <BackPage title="工作记录" />
    <div class="tabs f-r a-c">
      <div
        v-for="item in tabs"
        :key="item.value"
        :class="['tab-item f-1', activeTab === item.value ? 'active' : '']"
        @click="activeTab = item.value"
      >{{ item.name }}</div>
    </div>
    <component :is="activeTab" />
  </div>
</template>

<script>
import Log1 from './log1'
import Log2 from './log2'
export default {
  name: 'User',
  components: {
    Log1,
    Log2
  },
  data() {
    return {
      activeTab: 'Log1',
      tabs: [
        { value: 'Log1', name: '有码项目' },
        { value: 'Log2', name: '无码项目' }
      ]
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.user-page {
    position: relative;
}
.tabs {
    width: 578px;
    height: 48px;
    background: #E6EDF5;
    border-radius: 24px 24px 24px 24px;
    padding: 0 16px;
    .tab-item  {
        height: 40px;
        border-radius: 20px 20px 20px 20px;
        text-align: center;
        color: #0A1629;
        line-height: 40px;
        font-size: 16px;
        &.active {
            background-color: #3F8CFF;
            color: #fff;
        }
    }
}
</style>
